var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation, clickablePreloader;
clickablePreloader = true;
var isvisible = true;

var myCanvasWidth;
var myCanvasHeight;

var myLogoVarHeight;

var myLogoVarWidth;
 

function init() {
    canvas = document.getElementById("canvas");
    anim_container = document.getElementById("animation_container");
    dom_overlay_container = document.getElementById("dom_overlay_container");
     document.addEventListener("visibilitychange", handleVisibilityChange, false);
    images = images||{};
    ss = ss||{};
    var loader = new createjs.LoadQueue(false);
    loader.installPlugin(createjs.Sound);
    loader.addEventListener("fileload", handleFileLoad);
    loader.addEventListener("complete", handleComplete);
	loader.addEventListener("progress", handleProgress); // <-- ADD THIS CODE HERE 
    loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt) {  
    if (evt.item.type == "image") { images[evt.item.id] = evt.result; } 
}
function handleVisibilityChange() {

	if(isvisible)

	{
		isvisible=false;
		exportRoot.stopSnd();
	}else{
	isvisible=true;
	exportRoot.startSnd();
	}

}
function handleProgress(evt) {  
    document.getElementById("preloadFill").style.width = Math.round(evt.progress * 100) + "%";  
} 

function preloadFillResize(){
	//preloadFill.style.marginLeft =(x-100)+ 'px';
	//preloadFill.style.top =(y+100)+ 'px';
	//preloadFill.style.width = (width-100) + 'px';
}
function handleComplete(evt) {
    //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
    var queue = evt.target;
    var ssMetadata = lib.ssMetadata;
    for(i=0; i<ssMetadata.length; i++) {
        ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
    }
	
    var preloaderDiv = document.getElementById("_preload_div_");
    preloaderDiv.style.cursor = "auto";
    clickablePreloader = false;
    preloaderDiv.style.display = 'none';
 
    canvas.style.display = 'block';
    exportRoot = myLib();
    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot); 
    //Registers the "tick" event listener.
    fnStartAnimation = function() {
        createjs.Ticker.setFPS(lib.properties.fps);
        createjs.Ticker.addEventListener("tick", stage);
    }       
    //Code to support hidpi screens and responsive scaling.
    function makeResponsive(isResp, respDim, isScale, scaleType) {      
        var lastW, lastH, lastS=1;     
		 var width;var height;

			 var canvasRatio = canvas.height / canvas.width;
    		 var windowRatio = window.innerHeight / window.innerWidth;
	 if (windowRatio < canvasRatio) {
	 	height = window.innerHeight;
	 	width = height / canvasRatio;
    } else {
        width = window.innerWidth;
        height = width * canvasRatio;
    }
        window.addEventListener('resize', resizeCanvas);        
        resizeCanvas();     
        function resizeCanvas() {           
            var w = lib.properties.width, h = lib.properties.height;            
            var iw = window.innerWidth, ih=window.innerHeight;          
            var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;          
            if(isResp) {                
                if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                    
                    sRatio = lastS;                
                }               
                else if(!isScale) {                 
                    if(iw<w || ih<h)                      
                        sRatio = Math.min(xRatio, yRatio);              
                }               
                else if(scaleType==1) {                 
                    sRatio = Math.min(xRatio, yRatio);              
                }               
                else if(scaleType==2) {                 
                    sRatio = Math.max(xRatio, yRatio);              
                }           
            }           
			var viewportHeight = window.innerHeight;
            canvas.width = w*pRatio*sRatio;         
            canvas.height = h*pRatio*sRatio;
            canvas.style.width = anim_container.style.width = dom_overlay_container.style.width =  preloaderDiv.style.width =w*sRatio+'px';             
            canvas.style.height = anim_container.style.height = dom_overlay_container.style.height =  preloaderDiv.style.height = h*sRatio+'px';
 			canvas.style.top = (viewportHeight - (h*sRatio)) / 2 + "px";
			var y = Math.round((window.innerHeight - height) / 2);
			var x = Math.round((window.innerWidth - width) / 2);
			myCanvasWidth = Math.ceil((w*pRatio*sRatio) / 10)+'px';
			myCanvasHeight = Math.ceil((h*pRatio*sRatio) / 11)+'px';

			
            stage.scaleX = pRatio*sRatio;           
            stage.scaleY = pRatio*sRatio;           
            lastW = iw; lastH = ih; lastS = sRatio;     
        }
    }
    makeResponsive(true,'both',true,1); 
    fnStartAnimation();
}




function zoomOut() {
  var element = document.getElementById("overlay");
  element.style.display = "none";
}

function playSound(id, loop) {
    return createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);
}
function stopSound(id) {
	 createjs.Sound.stop(id);
}